<template>
  <div class="app-menu">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button
          type="info"
          @click="$router.push({name: 'create-menu'})"
          size="small"
        >添加菜单
        </el-button>
      </div>

      <el-table
        :data="menus"
        border
        style="width: 100%">

        <el-table-column
          type="index"
          label="编号"
          width="80"
          align="center">
        </el-table-column>

        <el-table-column
          prop="name"
          label="菜单名称">
        </el-table-column>
        <el-table-column
          prop="level"
          label="菜单级数"
          align="center">
        </el-table-column>
        <el-table-column
          prop="icon"
          label="前端图标">
        </el-table-column>
        <el-table-column
          prop="orderNum"
          label="排序">
        </el-table-column>

        <el-table-column
          label="操作"
          width="180"
          align="center">
          <template slot-scope="scope">
            <el-button type="warning" size="small" @click="editMenu(scope.row)">修改</el-button>
            <el-button type="danger" size="small" @click="deleteMenu(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>
  </div>
</template>

<script>
  import { deleteMenu, getAllMenus } from '@/services/menu'

  export default {
    name: 'app-menu',
    data() {
      return {
        tableData: [],
      }
    },
    created() {
      this.loadAllMenus()
    },
    methods: {
      async loadAllMenus() {
        const { code, data } = await getAllMenus()
        if (code === '000000') {
          this.tableData = data
        }
      },
      editMenu(row) {
        this.$router.push({ name: 'edit-menu', params: { id: row.id } })
      },
      deleteMenu(id) {
        this.$confirm('您确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const { code } = await deleteMenu(id)
          if (code === '000000') {
            this.$message.success('删除成功')
            this.loadAllMenus()
          }
        })
      }
    },
    computed: {
      menus() {
        return this.tableData.map(d => {
          const item = { ...d }
          switch (d.level) {
            case 0:
              item.level = '一级'
              break
            case 1:
              item.level = '二级'
              break
            case 2:
              item.level = '三级'
              break
          }
          return item
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
